﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GoogleMap.aspx.cs" Inherits="ADAuthentication.Web.GoogleMap" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        .header
        {
            height:30px;
            background-color:lightgray;
            z-index:10;
        }
        .body
        {
            height:100%; 
        }
        .footer
        {
        }
        .body_header
        { 
            height:100px; 
            z-index:9;
            margin-bottom:5px;
        }
        .body_content
        {
            height:100%; 
            background-color:Red;
            clear:both;
        }
        .body_footer
        {
        }
        
        .body_content_left
        {
            width:195px;
            height:100%; 
            position:absolute;
            left:5px;
        }
        .body_content_right
        {  
            left:200px;
            position:absolute;
            width:100%; 
        }
        .map_canvas
        {  
        }
        .logo
        {
            height:100%;
            width:100px;
            float:left;
            background-color:Red;
        }
        .views
        {
            float:right;
            width:300px;
        }
        .areaPosition
        {            
            height:100%;
            width:300px;
            float:left;
        }
        .searchBox
        {
            width:100%;
            height:60px;
        }
        .searchArea
        {
            width:100%;
        }
    </style>
</head>
<body >
    <form id="form1" runat="server">
    <div style="height:100%; width:100%;">
        <div class="header">
            Welcome to search house website!
        </div>
        <div class="body">
            <div class="body_header">
                <div class="logo">
                    LOGO
                </div>
                <div class="areaPosition">
                    <div class="searchBox">
                        <input type="text" value="输入名称或地标"/>
                    </div>
                    <div class="searchArea">
                        <div>
                            快速定位：
                            <a href="#" class="searchfilter" filtertype="" filtervalue="">区域</a>
                            <a href="#" class="searchfilter" filtertype="" filtervalue="">板块</a>
                            <a href="#" class="searchfilter" filtertype="" filtervalue="">地铁</a>
                        </div>
                    </div>
                </div>
                <div class="views">
                    <a href="#" class="mapView">地图视图</a>
                    <a href="#" class="satelliteView">卫星视图</a>
                    <a href="#" class="listview">列表视图</a>
                </div>
            </div>
            <div class="body_content">    
                <div class="body_content_left">
                    <div class="price_filter">
                        <div class="filter_left">Total Price:</div>
                        <div class="filter_right">
                            <a href="#" class="searchfilter" filtertype="" filtervalue="">None</a>
                        </div>
                    </div>
                    <div class="housecategory_filter">
                        <div class="filter_left">House Type:</div>
                        <div class="filter_right">
                            <a href="#" class="searchfilter" filtertype="" filtervalue="">None</a>
                        </div>
                    </div>
                    <div class="others_filter">                    
                        <div class="filter_left">More Filters:</div>
                        <div class="filter_right">
                            <a href="#" class="searchfilter" filtertype="" filtervalue="">None</a>
                        </div>
                    </div>
                </div>
                <div class="body_content_right">                
                    <div id="map_canvas" class="map_canvas"></div>
                </div>
            </div> 
            <div class="body_footer">
            </div>
        </div>
        <div class="footer">
        </div>
    </div>
    
    <script type="text/javascript"> 
        $(document).ready(function () {
            searchHouse.initialize({
                    mapCanvas: ".map_canvas",
                    width: 1000,
                    height:800,
                    mapView: ".mapView",
                    satelliteView: ".satelliteView",
                    searchFilter:".searchfilter"
                }
            );
        });

        var searchHouse = {
            map: null,
            mapCanvas: null,
            defultMapOptions: {
                zoom: 9,
                minZoom: 9,
                center: new google.maps.LatLng(39.90555, 116.39147),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true
            },
            mapOptions: null,
            searchHouseOptions: null,
            searchHouseFilters: [],
            initializeSearchHouseOptions: function (_searchHouseOptions) {
                this.searchHouseOptions = {
                    mapCanvas: _searchHouseOptions.mapCanvas,
                    width: _searchHouseOptions.width,
                    height: _searchHouseOptions.height,
                    mapView: _searchHouseOptions.mapView,
                    satelliteView: _searchHouseOptions.satelliteView,
                    searchFilter: _searchHouseOptions.searchFilter
                };
            },
            initialize: function (_searchHouseOptions, _mapOptions) {
                this.initializeSearchHouseOptions(_searchHouseOptions);
                this.mapCanvas = $(this.searchHouseOptions.mapCanvas);
                if (this.searchHouseOptions.width) this.mapCanvas.width(this.searchHouseOptions.width);
                if (this.searchHouseOptions.height) this.mapCanvas.height(this.searchHouseOptions.height);
                this.mapOptions = _mapOptions ? _mapOptions : this.defultMapOptions;
                this.map = new google.maps.Map(this.mapCanvas.get(0), this.mapOptions);
                $(this.searchHouseOptions.mapView).click(function () {
                    searchHouse.map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
                });
                $(this.searchHouseOptions.satelliteView).click(function () {
                    searchHouse.map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
                });
                $(this.searchHouseOptions.searchFilter).click(function () {

                });
                this.searchHouseFilters[0] = {name:"",type:""}; 
            },
            getSearchHouseFilter: function () {
            },
            getSearchHouseResult: function (_searchHouseFilters) {
                return "";
            },
            showSearchHouseResult: function (_searchHouseResult) {
            }
        };
    </script>
    </form>
</body>
</html>
